const tbody = document.querySelector("tbody"); //获取学员成绩tbody的don元素

//创建一个函数 查询成绩数据
async function getScoreList() {
  const result = await axios({ url: "/score/list" }); //声明结果等于查询回来的成绩数据 get可以忽略不写
  const data = result.data.data; //data是一个对象 data=学员信息与成绩
  // console.log(result);

  let html = ""; //声明空字符串

  //用for in 做对象遍历
  for (const key in data) {
    // key  = 学员数据的id
    // data[key].name = 学员数据的名字
    // data[key].score= 学员数据的成绩
    html += `
        <tr>
        <th scope="row">${key}</th>
        <td>${data[key].name}</td>
        <td class="score" data-id="${key}" data-batch="${1}">${
      data[key].score[0]
    }</td>
        <td class="score" data-id="${key}" data-batch="${2}">${
      data[key].score[1]
    }</td>
        <td class="score" data-id="${key}" data-batch="${3}">${
      data[key].score[2]
    }</td>
        <td class="score" data-id="${key}" data-batch="${4}">${
      data[key].score[3]
    }</td>
        <td class="score" data-id="${key}" data-batch="${5}">${
      data[key].score[4]
    }</td>
        </tr>
        `;
  }

  // 渲染标签到tbody页面上 此时html已经通过遍历对象的方法有对应的值
  tbody.innerHTML = html;
}

//调用查询成绩数据
getScoreList();

//利用事件委托为成绩的单元表格tbody创建双击事件
tbody.addEventListener("dblclick", function (e) {
  //判断当前点击的td标签是否带有类名 score  有就为ture 触发业务
  if (e.target.classList.contains("score")) {
    //创建一个input标签在td单元表格内
    const input = document.createElement("input");
    //input标签自带属性
    input.type = "text";
    //插入到点击对应的td标签里
    e.target.append(input);
    //input标签在css属性为display = "none" 需要调整为display = "block"显示出来
    input.style.display = "block";
    //双击之后显示框默认为空白 需要吧旧成绩显示在表单上更直观
    input.value = e.target.innerText; // 显示旧成绩
    //让input标签自动获得焦点 增加客户体验 取消需要重新单击才能获得焦点
    input.focus();

    // 给input绑定抬起键盘 判断按下是不是回车键
    input.addEventListener("keyup", async function (ev) {
      // console.log(ev.key); 回车键为Enter
      //判断修改后成绩按下是否为回车键Enter
      if (ev.key === 'Enter'){
        //调用按下回车和失去焦点的事件处理函数
        eventFunc()
        //将失去焦点事件解绑
        input.removeEventListener("blur", eventFunc);
      }
    });
    // 给input绑定失去焦点事件
    input.addEventListener("blur", eventFunc);
      //创建一个按下回车和失去焦点的事件处理函数
      //创建处理函数是为了解决按下回车和失去焦点事件同时触发 按下回车事件触发了的时候自动解绑失去焦点事件
      async function eventFunc() {
         //创建id和batch = td标签的分别的属性值 为下面发送post请求给后端 必传的参数
         const { id, batch } = e.target.dataset;
         // console.log(id, batch ,input.value);
         const result = await axios({
           url: "/score/entry",
           method: "post", //增加方法
           data: {
             //传参数
             stu_id: id, //数据的id
             batch: batch, //第x次成绩
             score: input.value, //修改后的成绩
           },
         });
         console.log(result);
         //code===0的时候代表修改成功 执行业务
         if (result.data.code === 0) {
           toastr.success("修改成绩成功"); //提框框
           // 刷新页面数据
           getScoreList();
         }
      }
       
      
    
  }
});


